<template>
  <div v-show="isShow">
    <div id="box" class="box" v-on:click="backup()">
        <div class="box-in"></div>
    </div>
  </div>
</template>

<script>
  export default{
    name:"Backup",
    data:function(){
      return{
        isShow:false,
      }
    },
    methods:{
      backup:function(){
        var timer  = null;
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            }else{
                cancelAnimationFrame(timer);
            }
        });
      },
      ScrollHeightChange:function(){
        // 获取到滚动条到网页最顶端的距离
        let ScrollHeight=document.documentElement.scrollTop;
        // console.log(ScrollHeight)
        if(ScrollHeight>100){
           this.isShow=true;
        }else{
          this.isShow=false
        }
      }
    },
    mounted(){
      window.addEventListener('scroll',this.ScrollHeightChange)
    },
    destroyed(){
      window.removeEventListener('scroll',this.ScrollHeightChange)
    },
  }
</script>

<style>
  .box{
      position:fixed;
      right:10px;
      bottom: 70px;
      height:30px;
      width: 50px;
      text-align:center;
      padding-top:20px;
      background-color: lightblue;
      border-radius: 20%;
      overflow: hidden;
  }
  .box:hover:before{
      top:50%
  }
  .box:hover .box-in{
      visibility: hidden;
  }
  .box:before{
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content:'回到顶部';
      width: 40px;
      color:peru;
      font-weight:bold;

  }
  .box-in{
      visibility: visible;
      display:inline-block;
      height:20px;
      width: 20px;
      border: 3px solid black;
      border-color: white transparent transparent white;
      transform:rotate(45deg);
  }
</style>
